<template>
  <div class="organizationWindow">
    <header>
      <span>{{ title }}</span>
      <i class="el-icon-close" @click="cancel"></i>
    </header>
    <main>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="168px"
        class="demo-ruleForm"
      >
        <el-form-item label="组织名称:" prop="departName">
          <el-input v-model="ruleForm.departName" placeholder="请输入组织名称"></el-input>
        </el-form-item>
      </el-form>
    </main>
    <footer>
      <span class="cancel" @click="cancel">取消</span>
      <span class="submit" @click="submit">确定</span>
    </footer>
  </div>
</template>

<script>
import { addDepart, updateDepart } from '@/api/sysUserRole'
export default {
  data () {
    return {
      ruleForm: {
        departName: ''
      },
      rules: {
        departName: [
          { required: true, trigger: 'blur', message: '组织名称不能为空' }
        ]
      }
    }
  },
  props: {
    title: String,
    departName: String,
    departId: Number
  },
  methods: {
    cancel () {
      this.$store.commit('set_ifShowCover', false)
    },
    submit () {
      if (this.title === '添加组织') {
        addDepart(this.ruleForm.departName).then(res => {
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: res.data.message
            })
            this.cancel()
          } else {
            this.$message({
              type: 'error',
              message: res.data.message
            })
          }
        })
      } else {
        updateDepart(this.departId, this.ruleForm.departName).then(res => {
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: res.data.message
            })
            this.cancel()
          } else {
            this.$message({
              type: 'error',
              message: res.data.message
            })
          }
        })
      }
    }
  },
  created () {
    if (this.departName !== '' && this.departId) {
      this.ruleForm.departName = this.departName
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__label {
  width: 168px !important;
  text-align: right;
}
::v-deep .el-form-item__content {
  float: left;
}
.organizationWindow {
  width: 840px;
  height: 720px;
  background-color: #fff;
  border-radius: 5px;
  header {
    height: 72px;
    border-bottom: 1px solid #e6e6e6;
    line-height: 72px;
    padding-left: 20px;
    position: relative;
    span {
      color: #333;
      font-size: 16px;
    }
    i {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 24px;
      cursor: pointer;
    }
  }
  main {
    height: 534px;
    padding: 42px;
    border-bottom: 1px solid #e6e6e6;
    .el-input {
      width: 400px;
    }
  }
  footer {
    position: relative;
    height: 112px;
    span {
      position: absolute;
      width: 128px;
      height: 48px;
      border-radius: 24px;
      top: 50%;
      line-height: 48px;
      text-align: center;
      transform: translateY(-50%);
      cursor: pointer;
      font-size: 18px;
    }
    .cancel {
      left: 280px;
      border: 2px solid #4868ff;
      color: #4868ff;
    }
    .submit {
      left: 432px;
      background: #4868ff;
      color: #fff;
    }
  }
}
</style>
